@import "base/mixin-font";
@import "base/flex";
@import "base/mixin-background";
@import "base/mixin-position";
@import "base/mixin-transform";


// mask-form ===========================================
// ============
.mask-form{
	@include position(fixed, 100, 0, 0, 0, 0);
	background-color: rgba(0,0,0,.5);
}

// form ===================
// ========================
.form{
	ul{
		padding: 0 50/$ppr;

		li{
			margin-top: 30/$ppr;
			border: 1px solid $colorCCC;
			border-radius: 10/$ppr;

			.input-item{
				input{
					width: 100%;
					height: 80/$ppr;
					padding: 19/$ppr 24/$ppr;
					font-size: 30/$ppr;
					color: $color333;
					line-height: 42/$ppr;
				}
			}
			.btn-code{
				width: 190/$ppr;
				height: 80/$ppr;
				font-size: 26/$ppr;
				color: $color666;
				line-height: 80/$ppr;
				text-align: center;
				border-left: 1px solid $colorCCC;
			}
		}
	}
}


// mask-modal-form ==============================================
// ======================
.mask-modal-form{
	@include position(fixed, 101, 50%, 50/$ppr, none, 50/$ppr);
	background-color: $colorFFF;
	border-radius: 8/$ppr;
	@include translate(0, -50%, 0);

	h1{
		margin: 60/$ppr 0 40/$ppr 0;
		font-size: 34/$ppr;
		color: $color333;
		line-height: 48/$ppr;
		text-align: center;
	}

	.btn-box{
		margin-top: 40/$ppr;
		height: 100/$ppr;
		border-top: 1px solid $colorCCC;

		.flex-a-i{
			a{
				position: relative;
				display: block;
				font-size: 34/$ppr;
				line-height: 100/$ppr;
				text-align: center;

				&.btn-cancle{
					color: $color666;
				}
				&.btn-ensure{
					color: $colorBlue;

					&:before{
						content: "";
						@include position(absolute, 2, 26/$ppr, none, none, 0);
						width: 1px;
						height: 48/$ppr;
						background-color: $colorCCC;
					}
				}
			}
		}
	}
}

